<template>
  <div class="header">
    <div>
      <span>状态:</span>
      <el-select
        class="m-2"
        v-model="selectedObject"
        placeholder="全部"
        size="small"
        value-key="id"
      >
        <el-option
          v-for="item in listTop"
          :key="item.id"
          :label="item.stuats"
          :value="item.stuats"
        />
      </el-select>
    </div>
    <div class="two">
      <span>地区:</span>
      <el-select
        v-model="value"
        class="m-2"
        placeholder="全部"
        size="small"
        value-key="id"
      >
        <el-option
          v-for="item in listTop"
          :key="item.id"
          :label="item.adress.slice(0, 2)"
          :value="item.adress"
        />
      </el-select>
    </div>
    <div>
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">时间:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            :size="size"
          />
          <el-time-select
            class="one"
            v-model="value2"
            start="08:30"
            step="00:15"
            end="18:30"
            placeholder="选择时间"
          />
        </div>
      </div>
    </div>
    <el-button type="info" plain @click="btn">重置</el-button>
    <el-button type="primary">确定</el-button>
  </div>
  <div class="fixed" v-show="flag">
    <h3>新增商品</h3>
    <aside>
      <span>优惠卷类型</span>
      <el-select v-model="value" class="m-2" placeholder="Select" size="small">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </aside>
    <aside>
      <span>优惠卷名称</span>
      <el-select v-model="value" class="m-2" placeholder="Select" size="small">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </aside>
    <aside>
      <span>领取时间</span>
      <el-select v-model="value" class="m-2" placeholder="Select" size="small">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </aside>
    <aside>
      <span>使用门槛</span>
      <el-radio-group v-model="radio1" class="ml-4">
        <el-radio label="1" size="large">有</el-radio>
        <el-radio label="2" size="large">无</el-radio>
      </el-radio-group>
    </aside>
    <aside>
      <div class="block">
        <span>有效期</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
        />
      </div>
    </aside>
    <aside>
      <span>优惠卷面值</span>
      <el-input v-model="input" placeholder="Please 输入" />
    </aside>
    <aside>
      <span>发放数量</span>
      <el-input v-model="input" placeholder="Please 输入" />
    </aside>
    <aside>
      <span class="span">使用说明</span>
      <textarea name="" id="" cols="30" rows="10"></textarea>
    </aside>
    <section>
      <el-button round>返回</el-button>
      <el-button round>取消</el-button>
      <el-button round @click="add">确定</el-button>
    </section>
  </div>
  <div class="add">
    <el-button type="primary" :bg="false" @click="newshop">新增秒杀</el-button>
    <el-button type="primary">批量中止</el-button>
    <el-button type="primary" @click="someremove">批量删除</el-button>
  </div>
  <div class="listbom">
    <el-table
      :fit="true"
      ref="multipleTableRef"
      :data="listbottom"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @select="select"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        property="a"
        label="订单编号"
        min-width="120"
        max-height="30px"
      />
      <el-table-column property="stuats" label="商品名称" min-width="100" />
      <el-table-column
        property="adress"
        label="供应商"
        min-width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column property="miao" label="销售价" min-width="120" />
      <el-table-column property="timer" label="秒杀时间" min-width="160" />
      <el-table-column property="miao" label="秒杀价" min-width="80" />
      <el-table-column property="miao" label="秒杀数量" min-width="80" />
      <el-table-column property="miao" label="限购量" min-width="80" />
      <el-table-column property="miao" label="运费" min-width="80" />
      <el-table-column property="name" label="操作" min-width="180">
        <el-button type="info" round>编辑</el-button>
        <el-button type="info" round>完成</el-button>
        <el-button type="info" round>操作</el-button>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { data } from "@/utils/promotion/index.js";
import { news, list } from "@/mock2/adress";
export default {
  setup() {
    // // 时间js
    const [disabledDate, value1, value2, shortcuts, value3, shortcuts1, size] =
      data();
    //头部新增显示隐藏功能
    const flag = ref(false);
    const newshop = () => {
      (flag.value = true);
    };
    //批量删除功能
    let num = [];
    const select = (selection, row) => {
      console.log(selection);
      num.push(row.id);
    };
    const someremove = () => {
      list.remove(num);
    };
    //新增添加功能
    const add = () => {
      if (selectedObj.value !== "" && selectObj.value !== "") {
        list.adddata(selectedObj.value, selectObj.value);
      }
      flag.value = false;
    };
    //状态地区 重置按钮
    const value = ref("");
    const selectedObject = ref({
      id: 0,
      name: "",
    });
    const btn = () => {
      (value.value = ""),
        (selectedObject.value = ""),
        (value1.value = ""),
        (value2.value = "");
    };
    //新增样品重置功能
    const selectedObj = ref({
      id: 0,
      name: "",
    });
    const selectObj = ref({
      id: 0,
      name: "",
    });
    const btntwo = () => {
      (selectObj.value = ""), (selectedObj.value = ""), (value3.value = "");
    };
    //下拉菜单多选框请求的数据
    const listTop = ref([]);
    onMounted(async () => {
      const res = await news.getData();
      listTop.value = res.list;
    });
    //列表数据请求
    const count = ref(100);
    const currentPage = ref(1);
    const listbottom = ref([]);
    const pageSize = ref(10);
    const handleCurrentChange = async (newSize) => {
      currentPage.value = newSize;
      const res = await list.getlistData({
        pageSize: 10,
        currentPage: newSize,
      });
      count.value = res.count;
      listbottom.value = res.list;
    };
    onMounted(async () => {
      const res = await list.getlistData({
        pageSize: 10,
        currentPage: currentPage.value,
      });
      listbottom.value = res.list;
    });
    //列表数据渲染
    const multipleTableRef = ref();
    const multipleSelection = ref([]);
    const toggleSelection = (rows) => {
      if (rows) {
        rows.forEach((row) => {
          multipleTableRef.value.toggleRowSelection(row);
        });
      } else {
        multipleTableRef.value.clearSelection();
      }
    };
    const handleSelectionChange = (val) => {
      if (multipleSelection.value) {
        multipleSelection.value = val;
      }
    };
    return {
      someremove,
      select,
      count,
      pageSize,
      handleCurrentChange,
      handleSelectionChange,
      toggleSelection,
      listbottom,
      selectObj,
      selectedObj,
      selectedObject,
      value,
      listTop,
      size,
      flag,
      btn,
      btntwo,
      newshop,
      add,
      disabledDate,
      value1,
      value2,
      shortcuts,
      value3,
      shortcuts1,
    };
  },
};
</script>

<style lang=less scoped>
.fixed {
  border-radius: 10px;
  width: 400px;
  height: 510px;
  background: #f1f1f1;
  position: fixed;
  top: 50px;
  left: 600px;
  z-index: 1000;
  /deep/.el-input--suffix {
    width: 130px;
    height: 30px;
  }
  /deep/.el-date-editor--datetimerange {
    width: 240px;
  }
  /deep/.el-input {
    width: 200px;
  }
  h3 {
    width: 100%;
    height: 55px;
    background: #82c4f1;
    font-size: 18px;
    text-align: center;
    line-height: 55px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .span {
    position: relative;
    top: -65px;
    left: 0;
  }
  span {
    font-size: 12px;
    font-family: YouYuan;
    font-weight: 400;
    color: black;
    margin-right: 10px;
  }
  textarea {
    width: 240px;
    height: 80px;
    border: 1px solid #cccccc;
    border-radius: 6px;
  }
  aside {
    margin-left: 50px;
    margin-top: 10px;
  }
  section {
    padding-top: 18px;
    text-align: center;
  }
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
}
.m-2 {
  width: 70px;
  height: 100%;
}
.el-input__inner {
  height: 30px;
}
span {
  font-size: 14px;
  font-family: YouYuan;
  font-weight: 400;
  color: #666666;
}
.el-input__wrapper {
  margin-left: 10px;
}
.one {
  margin-left: 10px;
}
.two {
  margin-left: 49px;
  margin-right: 49px;
}
.el-picker__popper {
  left: 532px !important;
}
.el-select__popper {
  left: 823px !important;
}
.el-button--info {
  margin-left: 15px;
}
.el-button {
  color: #666666;
  width: 100px;
  height: 25px;
  background: white;
}
.header .el-button {
  width: 65px;
}
.add {
  margin-top: 18px;
}
.listbom {
  margin-top: 20px;
  .el-button--info {
    width: 35px;
    height: 25px;
    font-size: 12px;
  }
}
.page {
  text-align: center;
  width: 100%;
  margin-top: 15px;
  .el-pagination {
    margin-left: 400px;
  }
}
</style>